﻿<template>
    <div class="ad-content">
        <div class="ad-tree" style="flex:0 0 350px !important">
            <div class="ad-title">
                <span>组织架构</span>
            </div>
            <div class="ad-treebody">
                <adp-tree ref="orgTree" node-key="OrganizationCode" node-expanded-key="Paths" @click="treeclick" @load="treeload"></adp-tree>
            </div>
        </div>
        <div class="ad-main">
            <div class="ad-console-top">
                <div class="ad-console-top-name">{{Fullname}}</div>
                <div class="ad-console-top-body">
                </div>
                <div class="ad-console-top-end">
                </div>
            </div>
            <div class="ad-console-body">
                <div class="ad-console-toolbar">
                    <el-button type="primary" size="mini" icon="icon-cog4 el-icon--left" @click="showRole">设置权限</el-button>
                    <el-button type="primary" size="mini" icon="icon-refresh2 el-icon--left" @click="refresh">刷新节点</el-button>
                    <el-button type="primary" size="mini" icon="el-icon-picture-outline el-icon--left" @click="updateAvatar">更新头像</el-button>
                    <el-dropdown @command="handleCommand">
                        <el-button type="primary" size="mini" icon="el-icon-more el-icon--left">
                            更多<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item icon="el-icon-delete el-icon--left" command="1">删除</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-video-play el-icon--left" divided command="2">开通</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-video-pause el-icon--left" divided command="3">停用</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <div style="float:right">
                        <el-select v-model="searchRole" placeholder="角色" style="width:120px;" clearable size="mini">
                            <el-option v-for="item in rls" :key="item.value" :label="item.name" :value="item.value">
                            </el-option>
                        </el-select>
                        <el-select v-model="searchPermit" placeholder="权限" style="width:120px;" clearable size="mini">
                            <el-option v-for="item in permits" :key="item.value" :label="item.name" :value="item.value">
                            </el-option>
                        </el-select>
                        <el-input v-model="searchkey" prefix-icon="el-icon-search" placeholder="姓名" @keyup.enter.native="search()" style="width:130px;" size="mini"></el-input>
                        <el-button type="primary" size="mini" @click="search()" style="padding: 7px 10px;">搜索</el-button>
                    </div>
                </div>
                <el-card class="box-card">
                    <el-table ref="tbl" size="mini" :data="plist" border style="width: 100%" @selection-change="handleSelectionChange" @sort-change="handleSortChange">
                        <el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
                        <el-table-column type="selection" width="50" align="center"></el-table-column>
                        <el-table-column prop="employeeName" width="100" label="姓名" align="center">
                            <template slot-scope="scope">
                                <div style="color: #ccc" v-if="scope.row.Role=='未设置'">{{scope.row.employeeName}}</div>
                                <div v-else>{{scope.row.employeeName}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="empJobLevelName" width="150" label="职业" align="center">
                            <template slot-scope="scope">
                                <div style="color: #ccc" v-if="scope.row.Role=='未设置'">{{scope.row.empJobLevelName}}</div>
                                <div v-else>{{scope.row.empJobLevelName}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="OrganizationName" label="单位/部门" header-align="center">
                            <template slot-scope="scope">
                                <div style="color: #ccc" v-if="scope.row.Role=='未设置'">{{scope.row.OrganizationName}}</div>
                                <div v-else>{{scope.row.OrganizationName}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Status" label="状态" width="100" align="center">
                            <template slot-scope="scope">
                                <div style="color: red" v-if="scope.row.Status=='1'">使用中</div>
                                <div style="color: #ccc" v-if="scope.row.Status=='2'">已停用</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Role" label="角色" width="150" align="center">
                            <template slot-scope="scope">
                                <div style="color: #ccc" v-if="scope.row.Role=='未设置'">{{scope.row.Role}}</div>
                                <div v-else>{{scope.row.Role}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Permit" label="权限" width="150" align="center">
                            <template slot-scope="scope">
                                <div style="color: #ccc" v-if="scope.row.Permit=='未设置'">{{scope.row.Permit}}</div>
                                <div v-else>{{scope.row.Permit}}</div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <br />
                    <div style="text-align:center"><el-pagination v-if="count>0" background layout="total, sizes, prev, pager, next, jumper" :current-page="currentpage" :total="count" @current-change="pagerclick" @size-change="sizechange" :page-sizes="[10, 20, 30, 40,50,100,200]"></el-pagination></div>
                </el-card>
            </div>
        </div>
        <el-dialog title="设置用户权限" :visible.sync="roleshow" :close-on-click-modal="false" class="dtnone dbnone" width="500px" @close="roleshow=false">
            <el-form label-position="top">
                <el-form-item label-width="0px">
                    <el-col :span="24">
                        <el-form-item label="主要角色">
                            <el-checkbox-group v-model="rolelist">
                                <el-checkbox v-for="item in roles" :label="item.value">{{item.name}}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label-width="0px">
                    <el-col :span="24">
                        <el-form-item label="附加角色">
                            <el-checkbox-group v-model="rolelist">
                                <el-checkbox v-for="item in aroles" :label="item.value">{{item.name}}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label-width="0px">
                    <el-col :span="24">
                        <el-form-item label="角色权限">
                            <el-checkbox-group v-model="permitlist">
                                <el-checkbox v-for="item in permits" :label="item.value">{{item.name}}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label-width="0px">
                    <el-button type="primary" @click="setRole" size="small" style="width:100%">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                roles: [],
                aroles: [],
                rls: [],
                permits: [],
                rolelist: [],
                permitlist: [],
                roleshow: false,
                OrganizationCode: '',
                Employees: [],
                Fullname: '',
                plist: [],
                count: 0,
                currentpage: 0,
                searchRole: '',
                searchPermit: '',
                searchkey:''
            }
        },
        mounted() {
            App.Page.init(this);
            this.loadRoles();
            this.loadPermits();
        },
        methods: {
            loadRoles() {
                App.Service.post("/plus/Yqd/Department/GetRoleList", {}).then((res) => {
                    if (res.success) {
                        this.roles = res.roles; 
                        this.aroles = res.aroles; 
                        this.rls = this.roles.concat(this.aroles);
                    }
                });
            },
            loadPermits() {
                App.Service.post("/plus/Yqd/Department/GetPermitList", {}).then((res) => {
                    if (res.success) {
                        this.permits = res.data;
                    }
                });
            },
            treeclick(node, hit) {
                this.OrganizationCode = node.data.OrganizationCode;
                this.Fullname = node.data.Fullname;
                this.load();
            },
            treeload(node, resolve) {
                var param = {
                    ParentCode: "",
                    Paths: "",
                    Fullname: ""
                }
                if (node && node.parent) {
                    param = {
                        ParentCode: node.data.OrganizationCode,
                        Paths: node.data.Paths,
                        Fullname: node.data.Fullname
                    }
                }
                App.Service.post("/plus/Yqd/Department/GetList", param).then((res) => {
                    if (res.success) {
                        resolve(res.data);
                    }
                });
            },
            load() {
                this.searchRole = '';
                this.searchkey = '';
                this.searchPermit = '';
                App.Service.post("/plus/Yqd/Department/GetUserList", {
                    start: App.Fn.toStart(this.currentpage),
                    limit: App.pagesize,
                    OrganizationCode: this.OrganizationCode,
                    Fullname: this.Fullname
                }).then((res) => {
                    if (res.success) {
                        this.count = res.totalcount;
                        this.plist = res.data;
                    }
                });
            },
            handleSelectionChange(val) {
                this.Employees = val;
            },
            handleCommand(command) {
                switch (command) {
                    case "1":
                        this.del();
                        break;
                    case "2":
                        this.setState(1);
                        break;
                    case "3":
                        this.setState(2);
                        break;
                }
            },
            setRole() {
                var Employees = JSON.stringify(this.Employees);
                var role = this.rolelist.join(',');
                var permit = this.permitlist.join(',');
                if (role.length == 0) {
                    App.Msg.error("请选择角色!");
                    return;
                }
                App.Service.post("/plus/Yqd/Department/SetRole", {
                    Employees: Employees,
                    Role: role,
                    PermitItem: permit
                }).then((res) => {
                    if (res.success) {
                        this.roleshow = false;
                        this.load();
                    }
                });
            },
            showRole() {
                if (this.Employees.length == 0) {
                    App.Msg.error("请选择人员!");
                    return;
                }
                this.role = '';
                this.roleshow = true;
            },
            setState(index) {
                if (this.Employees.length == 0) {
                    App.Msg.error("请选择人员!");
                    return;
                }
                var Employees = this.Employees.map(row => row.employeeCode);
                App.Service.post("/plus/Yqd/Department/SetState", {
                    Employees: Employees,
                    state: index
                }).then((res) => {
                    if (res.success) {
                        this.load();
                    }
                });
            },
            del() {
                if (this.Employees.length == 0) {
                    App.Msg.error("请选择人员!");
                    return;
                }
                var Employees = this.Employees.map(row => row.employeeCode);
                App.Service.post("/plus/Yqd/Department/Delete", {
                    Employees: Employees
                }).then((res) => {
                    if (res.success) {
                        this.load();
                    }
                });
            },
            updateAvatar() {
                if (this.Employees.length == 0) {
                    App.Msg.error("请选择人员!");
                    return;
                }
                App.Service.post("/plus/Yqd/Department/UpdateAvatar", {
                    EmployeeCode: this.Employees[0].employeeCode
                }).then((res) => {
                    if (res.success) {
                        App.Msg.success("人员头像更新成功！");
                    }
                });
            },
            search() {
                this.currentpage = 0;
                App.Service.post("/plus/Yqd/Department/SearchUserList", {
                    role: this.searchRole,
                    permit: this.searchPermit,
                    key: this.searchkey
                }).then((res) => {
                    if (res.success) {
                        this.plist = res.data;
                    }
                });
            },
            pagerclick(currentpage) {
                this.currentpage = currentpage;
                this.load();
            },
            refresh() {
                App.Service.post("/plus/Yqd/Department/refresh", {
                    OrganizationCode: this.OrganizationCode
                }).then((res) => {
                    if (res.success) {
                        App.Msg.success('刷新成功！');
                        this.$refs.orgTree.updateNode(res.parent);
                        this.$refs.orgTree.clickNode(res.current);
                    }
                });
            }
        }
    };
</script>
